<template>
  <div class="wrap">
    <van-tabbar v-model="active" active-color="#181818" inactive-color="#282828">
       <van-tabbar-item replace to="/">
          <span>首页</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.active1 : icon.inactive12" />
        </van-tabbar-item>
         <van-tabbar-item replace to="/pages/forumIndex">
          <span>论坛</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.inactive22" />
        </van-tabbar-item>
         <van-tabbar-item replace to="/pages/personalCenter">
          <span>我的</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.active3 : icon.inactive32" />
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  name: "App",
  data() {
    return {
      active: 0,
      icon: {
        active1: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar1.2.png",
        inactive12: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar1.1.png",
        active2: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar2.2.png",
        inactive22: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar2.1.png",
        active3: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar3.2.png",
        inactive32: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar3.1.png",
      },
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    jumpBanner() {
      this.$router.push({
        path: "/pages/bannerInfo",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
};
</script>

<style scoped></style>
